<template>
  <div id="app">
    <!-- 返回 -->
    <van-nav-bar class='head' v-if="!isShow" :title='$route.meta.title' left-text='返回' left-arrow @click-left='onClickLeft' />
    <!-- 控制带tab页面和不带tab页面的高度 -->
    <div class="contentBox" v-if="isShow">
      <keep-alive include="home,topic,category">
        <router-view />
        <!-- 解决详情页id变而内容不变的问题 - 第一种 -->
        <!-- <router-view :key="$route.query.id" /> -->
      </keep-alive>
    </div>
    <div class="contentBox tabs" v-if="!isShow">
      <keep-alive include="home,topic,category,categoryList">
        <router-view />
        <!-- 解决详情页id变而内容不变的问题 - 第一种 -->
        <!-- <router-view :key="$route.query.id" /> -->
      </keep-alive>
    </div>
    <van-tabbar route active-color='blue' v-if="isShow">
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/topic" icon="description">专题</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="qr">分类</van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  watch: {
    $route: function (to, from) {
      // 设置白名单
      var pathArr = ["/home", "/topic", "/category", "/cart", "/my"];
      // 查找
      var item = pathArr.find((ele) => ele == to.path);
      // 是否显示底部导航栏
      if (item) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
  created() {
    // 本地存储openId
    var userInfo = {
      openId: "66",
      nickName: "张三",
      avatarUrl:
        "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
    };
    var openId = userInfo.openId;
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
    localStorage.setItem("openId", openId);
  },
  // 方法
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
body,
html {
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: #f4f4f4;
  a {
    text-decoration: none;
  }
  ul {
    list-style: none;
  }
  // 返回
  .head {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
#app {
  height: calc(100% - 1px);
  border-top: 1px solid transparent;
  .contentBox {
    height: calc(100% - 98px);
    margin-bottom: 50px;
    border-top: 1px solid transparent;
  }
  .tabs {
    height: calc(100% - 47px);
    margin-top: 46px;
    margin-bottom: 0;
  }
}
</style>
